<template>
	<view style="display: flex;flex-direction: column;height: 100%;box-sizing: border-box;">
		<view class="pd-20">
			<view class="bg_fff bg_border">
				<textarea v-model="dataText" placeholder="粘贴关键词信息，信息自动拆分关键词" border="none" maxlength="-1"
					style="height:292rpx;width: 96%;padding: 10rpx 0;margin: 0px 2%;">
				</textarea>
				<view class="display_row_btn_center c_999999 f_34 pd-20">
					<view class="display_row_btn_center">
						<!-- <image class="mr-10"
						src="https://dtkj-qnyimg.diankuai.com/%E6%8E%A8%E5%B9%BF%E8%AF%A6%E6%83%85/%E5%AF%BC%E5%85%A5.png"
						style="width: 40rpx;height: 45rpx;"></image>
					<text>导入文件</text> -->
					</view>

					<view>
						<text style="margin-right: 40rpx;" class="c_C62B2C" @click="showPop">示例</text>
						<text @click="discern" style="color: blue;">识别</text>
					</view>
				</view>
			</view>

			<u-list :customStyle="{
				marginBottom: '260rpx'
			}" :scrollable="false" ref="mList" :scrollIntoView="scrollIntoView">
				<view v-for="(item, index) in dataList" :key="index" class="bg_fff bg_border mb-20 pr-20"
					style="border: none;" :id="'i'+index">
					<view class="pd-10 display_row_btn_center" style="padding-bottom: 0px;">
						<text style="font-weight: 600;">作品{{index+1}}</text>
						<image src="https://dtkj-qnyimg.diankuai.com/delete_light.png"
							style="width: 40rpx;height: 40rpx;" v-if="index>0" @click="delOne(index)"></image>
					</view>
					<u--form labelPosition="left" labelWidth="160rpx" :labelStyle="{
				paddingLeft:'20rpx',
				color: '#333333'
				}">
						<block v-for="(it,ind) in feedback_rules" :key="ind">
							<u-form-item :label="it.required==2?'*'+it.text:it.text" :prop="item[it.value]"
								v-if="it.value=='url' || it.value=='play_num'">
								<u--input v-model="item[it.value]" border="none" :placeholder="'请输入'+it.text">
								</u--input>
							</u-form-item>

							<u-form-item :label="it.required==2?'*'+it.text:it.text" :prop="item[it.value]" v-if="it.value=='type'">
								<u-radio-group v-model="item[it.value]">
									<u-radio label="视频" name="1"></u-radio>
									<u-radio label="图文" name="2" :customStyle="{marginLeft:'20rpx'}"></u-radio>
								</u-radio-group>
							</u-form-item>

							<u-form-item :label="it.required==2?'*'+it.text:it.text" :prop="item[it.value]" v-if="it.value=='category_id'">
								<uni-data-picker :localdata="bookCate" :map="{text:'name',value:'id'}"
									popup-title="内容类型" placeholder="请选择内容类型" v-model="item[it.value]"
									@popupopened="pickOpen" @popupclosed="pickHide"></uni-data-picker>
							</u-form-item>

							<u-form-item label="*发布平台" v-if="it.value=='popu_platform_id'">
								<uni-data-picker :localdata="platform" :map="{text:'name',value:'id'}"
									popup-title="发布平台" placeholder="请选择发布平台" v-model="item.popu_platform_id"
									@change="changePlatform(index)" @popupopened="pickOpen" @popupclosed="pickHide">
								</uni-data-picker>
							</u-form-item>

							<u-form-item label="*平台帐号" v-if="it.value=='account_id'">
								<uni-data-picker :localdata="item.accountList" :map="{text:'nickname',value:'id'}"
									popup-title="平台帐号" placeholder="请选择平台帐号" v-model="item.account_id"
									@popupopened="pickOpen" @popupclosed="pickHide"></uni-data-picker>
							</u-form-item>
						</block>
					</u--form>
				</view>
			</u-list>
		</view>

		<view class="bbtn" v-if="!pickShow">
			<view class="addBtn display_row_center" @click="addOne">
				<u-icon name="plus" color="#C62B2C" size="16">
				</u-icon>
			</view>

			<view class="btmBox c_ffffff" @click="submitForm">
				确认
			</view>
		</view>

		<uni-popup type="bottom" ref="popup" background-color="#ffffff">
			<view style="height: 400rpx;">
				<view class="popTitle">
					作品识别
				</view>
				<u-divider :customStyle="{margin:'0px'}"></u-divider>
				<view class="pd-20">
					<view class="c_000000">以换行分隔单个作品</view>
					<view class="mt-20 c_999999">{{popContent}}
					</view>
					<view class="mt-10 c_999999">{{popContent}}
					</view>
				</view>
			</view>
		</uni-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		postFeedBack,
		getCategores,
		getSearchData,
		getAccountList,
		getRule
	} from '@/config/api.js'

	export default {
		name: "keyword_add",
		props: {
			missionId: {
				type: String,
				default: ""
			},
			mission: {
				type: Object,
				default: null
			},
			flag: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				dataList: [],
				accountList: [],
				platform: [],
				dataText: "",
				show: false,
				scrollIntoView: "i0",
				pickShow: false,
				item: null,
				feedback_rules: [],
				popContent: ""
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		created() {
			// {
			// 	type: "1",
			// 	url: "",
			// 	popu_platform_id: "",
			// 	accountList: [],
			// 	account_id: "",
			// 	play_num: ""
			// }
		},
		mounted() {
			this.$nextTick(function() {
				this.init();;
			});
		},
		methods: {
			init() {
				getRule({
					platform_flag: this.flag
				}).then(res => {
					res.feedback_rules.push({
						value: 'popu_platform_id'
					});
					res.feedback_rules.push({
						value: 'account_id'
					});
					this.feedback_rules = res.feedback_rules;
					var itemData = {};
					var content = [];
					for (var item of res.feedback_rules) {
						if (item.value == "type")
							itemData[item.value] = "1";
						else
							itemData[item.value] = "";
						content.push(item.text);
					}

					itemData['popu_platform_id'] = '';
					itemData['account_id'] = '';
					itemData['accountList'] = [];

					content.push("发布平台");
					content.push("平台帐号");

					this.item = itemData;

					this.popContent = content.join(" ");
					this.dataList.push(JSON.parse(JSON.stringify(itemData)));
				}).catch(err => {

				})

				this.getSearch();
				this.getAccountListData();
			},
			getAccountListData() {
				getAccountList({
					Status: 1
				}).then(res => {
					this.accountList = res;
				}).catch(err => {

				})
			},
			changePlatform(index) {
				var item = this.dataList[index];
				var popu_platform_id = item.popu_platform_id;

				var accountList = [];
				for (var account of this.accountList) {
					if (account.popu_platform_id == popu_platform_id) {
						accountList.push(account)
					}
				}

				this.dataList[index].account_id = "";
				this.dataList[index].accountList = accountList;
			},
			getSearch() {
				getSearchData().then(res => {
					this.platform = res[0].data;
				}).catch(err => {

				})
			},
			submitForm() {
				this.$u.throttle(this.doSub, 3000);
			},
			doSub() {
				postFeedBack({
					id: this.missionId,
					data: JSON.stringify(this.dataList.map(item => ({...item, url: item.url.replace(/^\s+|\s+$/g, '')})))
				}).then(res => {
					this.$refs.uToast.show({
						type: 'default',
						message: "回填成功",
						complete() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.info,
						duration: 2000,
						icon: 'none'
					})
				})
			},
			discern() {
				var dataText = this.dataText;
				var list = dataText.split("\n");
				var dataList = [];

				if (list.length > 0) {
					for (var item of list) {
						var itemArg = item.split(" ");
						itemArg.filter(function(el) {
							return el.trim() != "";
						})
						var keys = Object.keys(this.item);

						if (itemArg.length == keys.length - 1) {
							if (itemArg[0].trim() != "" && itemArg[1].trim() != "" && itemArg[2].trim() != "" && itemArg[3]
								.trim() != "") {

								var pushItem = {};

								keys.forEach((it, ind) => {
									if (it != 'popu_platform_id' && it != 'popu_platform_id') {
										if (it != 'type') {
											pushItem[it] = itemArg[ind];
										} else {
											pushItem[it] = itemArg[ind].trim() == '视频' ? '1' : '2';
										}
									}
								})

								var popu_platform_id = "";
								var accountList = [];
								var account_id = ""

								for (var popu_platform of this.platform) {
									if (popu_platform.name == itemArg[2].trim()) {
										popu_platform_id = popu_platform.id;
									}
								}

								for (var account of this.accountList) {
									if (account.popu_platform_id == popu_platform_id) {
										accountList.push(account)
										if (account.nickname == itemArg[3].trim()) {
											account_id = account.id;
										}
									}
								}

								pushItem['popu_platform_id'] = popu_platform_id;
								pushItem['account_id'] = account_id;
								pushItem['accountList'] = accountList;

								dataList.push(pushItem)
							}
						}
					}
				}

				if (dataList.length > 0) {
					this.dataList = dataList;
				}
			},
			addOne() {
				this.dataList.push(JSON.parse(JSON.stringify(this.item)))

				// this.scrollIntoView = 'i' + (this.dataList.length - 1);

				// this.$refs.mList.scrollIntoViewById('i' + (this.dataList.length - 1))
			},
			delOne(index) {
				this.dataList.splice(index, 1)
			},
			showPop() {
				this.$refs.popup.open();
				this.show = true;
			},
			pickOpen() {
				this.pickShow = true;
			},
			pickHide() {
				this.pickShow = false;
			}
		}
	}
</script>

<style scoped>
	.bg_border {
		border: 1px solid #999999;
		border-radius: 20rpx;
		overflow: hidden;
		box-sizing: border-box;
	}

	.addBtn {
		width: 96%;
		height: 60rpx;
		border: 1px dotted #C62B2C;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		margin-left: 2%;
	}

	.popTitle {
		font-size: 40rpx;
		font-weight: 600;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.bbtn {
		position: fixed;
		bottom: 0;
		padding-bottom: 60rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 80;
		background-color: #F2F2F2;
	}

	/deep/ .uni-data-tree-dialog {
		z-index: 100000000;
	}
</style>
